
    <div class="container" id="scatterPlot">
        <div class="row">
            <div class="col-md-8">
                <article>
                    <h2>Scatter Plot with single source and horizontal grid</h2>
                    <div class="js-scatter-plot-chart-tooltip-container scatter-plot-container card--chart"></div>
                </article>
            </div>
            <div class="col-md-4 sidebar">
                <h3>The code</h3>
                <pre><code class="language-javascript">
// add title to tooltip
tooltip.title('Temperature (C)');

scatterChart
    .aspectRatio(0.7)
    .width(containerWidth)
    .circleOpacity(0.6)
    .hasTrendline(true)
    .grid('horizontal')
    .xAxisLabel('Temperature (C)')
    .yAxisLabel('Ice Cream Sales')
    .xAxisFormat('.1f')
    .yAxisFormat('$')
    .on('customMouseOver', tooltip.show)
    .on('customMouseMove', tooltip.update)
    .on('customMouseOut', tooltip.hide);

// tooltip set up
tooltip.valueLabel('y')
    .nameLabel('x')
    .numberFormat('$');

scatterPlotContainer
    .datum(dataset)
    .call(scatterChart);
                </code></pre>
                <h4>Colors</h4>
                <label class="control-label">You can also check other color schemas:</label>
                <div class="js-color-selector-container"></div>
                <h4>Data Input</h4>
                <p>Check the <a href="/britecharts/global.html#ScatterPlotData__anchor">data input schema</a> of this chart.</p>
                <h4>Export Chart</h4>
                <p>You can also export this chart by pressing: <input id="button" type="button" value="Export" class="btn btn-sm btn-primary" /></p>
                <h4>Demo Code</h4>
                <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-scatter-plot.js">in github</a></p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <article>
                    <h2>Scatter Plot with hollow circles and custom circle area</h2>
                    <div class="js-scatter-plot-container-with-hollow-circles scatter-plot-container card--chart"></div>
                </article>
            </div>
            <div class="col-md-4 sidebar">
                <h3>The code</h3>
                <pre><code class="language-javascript">
scatterChart
    .width(containerWidth)
    .hasCrossHairs(true)
    .hasHollowCircles(true)
    .margin({
        left: 60,
        bottom: 45
    })
    .maxCircleArea(15)
    .on('customMouseOver', tooltip.show)
    .on('customMouseMove', function (dataPoint, mousePos, chartSize) {
        // update tooltip title with changing data point name
        tooltip.title(dataPoint.name);
        // passing an empty object to not have any data
        // in the tooltip - we want to only show the title
        tooltip.update({}, mousePos, chartSize);
    })
    .on('customMouseOut', tooltip.hide);

container
    .datum(dataset)
    .call(scatterChart);
                </code></pre>
                <h4>Colors</h4>
                <label class="control-label">You can also check other color schemas:</label>
                <div class="js-color-selector-container"></div>
                <h4>Data Input</h4>
                <p>Check the <a href="/britecharts/global.html#LineChartData__anchor">data input schema</a> of this chart.</p>
                <h4>Export Chart</h4>
                <p>You can also export this chart by pressing: <input id="button" type="button" value="Export" class="btn btn-sm btn-primary" /></p>
                <h4>Demo Code</h4>
                <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-scatter-plot.js">in github</a></p>
            </div>
        </div>
    </div>
